import { Col } from "antd"
import React from "react"

import { IBottomListItem } from "@/api/dxn/type"
interface Props {
	item: IBottomListItem
}

const StepBottomListItem: React.FC<Props> = ({ item }) => {
	return (
		<>
			<Col span={11} className={`flexCenterLeft ${item.betAction === "F" ? "op50" : ""}`}>
				<div className="seatPosImgDiv">{item.seatCodeName}</div>
				<span className="nickNameSpan">{item.nickName || "-"}</span>
			</Col>
			{item.isWinSquidRecord ? (
				<Col span={4} className="flexCenterStart">
					<span className="betOpImgSpan">
						<img src={item.betOpImg} className="fit-contain" />
					</span>
					<span className="betAmountSpan">{item.betAmountText}</span>
				</Col>
			) : (
				<>
					<Col span={4} className={`flexCenterStart ${item.betAction === "F" ? "op50" : ""}`}>
						{item.isPlusBetAction ? (
							<div className="plusBetAction">{item.betAction}</div>
						) : (
							<div className="betOpImgSpan" style={{ backgroundColor: item.betActionColor }}>
								{item.betAction}
							</div>
						)}
						<span className="betAmountSpan">
							{item.betActionInsureName}
							{item.betAction !== "F" ? item.betAmount : ""}
						</span>
					</Col>
					{!item.isEVInsured && (
						<>
							<Col span={4} className="flexCenterleft rightValueCol">
								{!item.betActionInsureName && (
									<>
										<span>P:</span>
										<span>{item.leijiPotAmount}</span>
									</>
								)}
							</Col>
							<Col span={4} className={`flexCenterleft rightValueCol ${item.betAction === "F" ? "op50" : ""}`}>
								{!item.betActionInsureName ? (
									<span>{item.afterChip}</span>
								) : (
									<>
										<span>{item.insureType}:</span>
										<span>{item.insurePool}</span>
									</>
								)}
							</Col>
						</>
					)}
				</>
			)}
		</>
	)
}

export default StepBottomListItem
